<template>
  <view class="container">
    <!-- 选项卡 -->
    <view :class="['tabs', showFilter ? 'tabs-white' : '']">
      <text
        :class="['tab', activeTab === 'city' ? 'active' : '']"
        @click="toggleTab('city')"
      >
        所在城市
      </text>
      <text
        :class="['tab', activeTab === 'nature' ? 'active' : '']"
        @click="toggleTab('nature')"
      >
        办学性质
      </text>
      <text
        :class="['tab', activeTab === 'type' ? 'active' : '']"
        @click="toggleTab('type')"
      >
        办学类型
      </text>
    </view>

    <!-- 筛选选项遮罩层 -->
    <view v-if="showFilter" class="filter-overlay" @click="closeFilter">
      <view class="filter-container" @click.stop>
        <!-- 左侧选项 -->
        <view class="left-options">
          <text
            v-for="(option, index) in leftOptions"
            :key="index"
            :class="['left-option', activeLeftOption === option ? 'active' : '']"
            @click="setActiveLeftOption(option)"
          >
            {{ option }}
          </text>
        </view>

        <!-- 右侧选项 -->
        <view class="right-options">
          <scroll-view scroll-y class="right-options-scroll">
            <text
              v-for="(option, index) in rightOptions"
              :key="index"
              :class="['right-option', activeRightOption === option ? 'active' : '']"
              @click="selectRightOption(option)"
            >
              {{ option }}
            </text>
          </scroll-view>
        </view>
      </view>
    </view>

    <!-- 大学信息卡列表 -->
    <view class="university-list">
      <view
        class="university-card"
        v-for="(university, index) in filteredUniversities"
        :key="index"
      >
        <!-- 学校图标 -->
        <image :src="university.icon" class="img"></image>

        <!-- 学校信息 -->
        <view class="university-content">
          <text class="name">{{ university.name }}</text>
          <text class="tags">
            <text v-for="(tag, i) in university.tags" :key="i" class="tag">
              {{ tag }}
            </text>
          </text>
          <text class="address">地址：{{ university.address }}</text>
        </view>

        <!-- 学校人数 -->
        <view class="student-count">
          <text>{{ university.studentCount }}人</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的选项卡
      activeTab: "",
      // 是否显示筛选选项
      showFilter: false,
      // 左侧选项
      leftOptions: [],
      // 右侧选项
      rightOptions: [],
      // 当前选中的左侧选项
      activeLeftOption: "",
      // 当前选中的右侧选项
      activeRightOption: "",
      // 筛选条件
      filterConditions: {
        city: "不限",
        nature: "不限",
        type: "不限",
      },
      // 大学数据
      universities: [
        {
          icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250313/67d24702cc00b.png",
          name: "北京大学",
          tags: ["985", "211", "双一流"],
          address: "广东省佛山市禅城区李华四路15号",
          city: "佛山",
          nature: "公办",
          type: "本科",
          studentCount: "1.2w",
        },
        {
          icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250313/67d24702cc00b.png",
          name: "清华大学",
          tags: ["985", "211", "双一流"],
          address: "广东省佛山市南海区桂城街道",
          city: "佛山",
          nature: "民办",
          type: "硕士",
          studentCount: "1.5w",
        },
        {
          icon: "https://zhimao.shengdunyun.net/uploads/wangeditor/20250313/67d24702cc00b.png",
          name: "复旦大学",
          tags: ["985", "211", "双一流"],
          address: "广东省佛山市顺德区大良街道",
          city: "佛山",
          nature: "中外合办",
          type: "博士",
          studentCount: "1.0w",
        },
        // 更多大学数据...
      ],
    };
  },
  computed: {
    // 根据筛选条件过滤大学列表
    filteredUniversities() {
      return this.universities.filter((university) => {
        // 根据所在城市筛选
        if (
          this.filterConditions.city !== "不限" &&
          university.city !== this.filterConditions.city
        ) {
          return false;
        }
        // 根据办学性质筛选
        if (
          this.filterConditions.nature !== "不限" &&
          university.nature !== this.filterConditions.nature
        ) {
          return false;
        }
        // 根据办学类型筛选
        if (
          this.filterConditions.type !== "不限" &&
          university.type !== this.filterConditions.type
        ) {
          return false;
        }
        return true;
      });
    },
  },
  methods: {
    // 切换选项卡
    toggleTab(tab) {
      if (this.activeTab === tab) {
        this.showFilter = !this.showFilter;
      } else {
        this.activeTab = tab;
        this.showFilter = true;
        this.updateFilterOptions();
      }
    },
    // 关闭筛选选项
    closeFilter() {
      this.showFilter = false;
    },
    // 更新筛选选项
    updateFilterOptions() {
      if (this.activeTab === "city") {
        this.leftOptions = ["附近", "区域"];
        this.rightOptions = ["不限", "1公里", "3公里", "5公里", "7公里", "10公里"];
      } else if (this.activeTab === "nature") {
        this.leftOptions = ["分类"];
        this.rightOptions = ["不限", "公办", "民办", "中外合办"];
      } else if (this.activeTab === "type") {
        this.leftOptions = ["办学类型"];
        this.rightOptions = ["不限", "博士", "硕士", "本科", "大专", "中专"];
      }
      this.activeLeftOption = this.leftOptions[0];
      this.activeRightOption = this.rightOptions[0];
    },
    // 设置左侧选项
    setActiveLeftOption(option) {
      this.activeLeftOption = option;
      this.updateRightOptions();
    },
    // 设置右侧选项
    selectRightOption(option) {
      this.activeRightOption = option;
      // 更新筛选条件
      if (this.activeTab === "city") {
        this.filterConditions.city = option;
      } else if (this.activeTab === "nature") {
        this.filterConditions.nature = option;
      } else if (this.activeTab === "type") {
        this.filterConditions.type = option;
      }
      // 关闭筛选弹窗
      this.showFilter = false;
    },
    // 更新右侧选项
    updateRightOptions() {
      if (this.activeTab === "city") {
        if (this.activeLeftOption === "附近") {
          this.rightOptions = ["不限", "1公里", "3公里", "5公里", "7公里", "10公里"];
        } else if (this.activeLeftOption === "区域") {
          this.rightOptions = ["不限", "禅城区", "南海区", "顺德区"];
        }
      }
    },
  },
};
</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
}

.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  transition: background-color 0.3s;
  position: relative;
  z-index: 1; /* 确保选项卡在遮罩层上方 */
}

.tabs.tabs-white {
  background-color: #fff;
}

.tab {
  padding: 10px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.tab.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.filter-overlay {
  position: fixed;
  top: 43px; /* 从选项卡下方开始覆盖 */
  left: 0;
  width: 100%;
  height: calc(100% - 60px); /* 减去选项卡的高度 */
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 999;
}

.filter-container {
  background-color: #fff;
  width: 100%;
  max-width: 400px;
  display: flex;
  max-height: 60vh; /* 固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.left-options {
  width: 30%;
  border-right: 1px solid #ccc;
}

.left-option {
  display: block;
  padding: 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.left-option.active {
  color: #007aff;
  font-weight: bold;
}

.right-options {
  width: 70%;
  padding-left: 10px;
}

.right-options-scroll {
  max-height: 60vh; /* 固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.right-option {
  display: block;
  padding: 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.right-option.active {
  color: #007aff;
  font-weight: bold;
}

.university-list {
  margin: auto 20px;
}

.university-card {
  background-color: #fff;
  margin-top: 10px;
  border-radius: 5px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  display: flex;
  align-items: center; /* 垂直居中 */
}

.img {
  width: 80px;
  height: 80px;
}

.university-content {
  margin-left: 10px;
  flex: 1; /* 占据剩余空间 */
}

.name {
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.tags {
  display: block;
  margin: 5px 0;
}

.tag {
  display: inline-block;
  padding: 2px 5px;
  background-color: #e0f7fa;
  border-radius: 4px;
  font-size: 12px;
  color: #00796b;
  margin-right: 5px;
}

.address {
  display: block;
  font-size: 14px;
  color: #666;
}

.student-count {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}
</style>